<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .web_notice a{
            text-decoration:none;
            color: #5ba4e5;
        }
    </style>
</head>
<body>
<script !src="">
    function outDiv(){
        document.getElementById("mydiv").style.display="block";
    }

    function hindDiv(){
        document.getElementById("mydiv").style.display="none";
    }

</script>
<a href="#" onclick="outDiv()">出现</a>
<div class="web_notice" id="mydiv" style="
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: rgba(0,0,0,0.3);*/
    background: center center no-repeat #2e2e2e;
    z-index: 99999;
    ">
    <div style="
    position: fixed;
    top: 50%;
    left: 50%;
    width: 550px;
    background: rgba(0,0,0,0.5);
    transform: translate(-50%, -50%);
    border-radius: 10px;
    padding: 50px 40px;">
        <div style="
    font-size: 16px;
    margin-top: 26px;
    line-height: 30px;
    color: #FFF;">
            <div id="content-backdrop" class="px-1 md:px-4 py-1 rounded shadow-lg"><h1 class="text-4xl font-bold my-3">Hi 👋</h1> <p class="my-4">
            I'm Eduardo,
        </p> <main id="main" style="--moveX:-1.54816px; --moveY:0.0755416px;"><p class="my-4">
            a Frontend Nerd. I work as a consultant to help you keep your
            applications maintainable. I also give
            <a href="#TODO" data-text="Vue.js trainings" style="color: #5ba4e5">Vue.js trainings</a> and
            <a href="https://www.youtube.com/results?search_query=eduardo+san+martin+morote" data-text="talk at conferences">talk at conferences</a>. I write some
            <a href="https://github.com/posva" data-text="useful libraries">useful libraries</a>, mostly for
            Vue, but not only, and post them on Github. I may not
            <i><a href="https://twitter.com/posva/status/1146415898967908352" data-text="take myself very seriously">take myself very seriously</a></i>
            but take my job very seriously and loves solving problems instead of
            complaining about them.
        </p> <p class="my-4">
            If you want to work together, please
            <a href="https://twitter.com/posva" data-text="send me a PM on Twitter">send me a PM on Twitter</a>.
        </p></main></div></div>
        <a style="
    display: block;
    background: blueviolet;
    color: #FFF;
    text-align: center;
    font-weight: bold;
    font-size: 19px;
    line-height: 60px;
    margin: 0 auto;
    margin-top: 45px;
    border-radius: 32px;
    width: 80%;
" onclick="hindDiv()">我记住你啦</a>

    </div>
</div>
</body>
</html>